<template>
  <div>
    <el-steps finish-status="success" :active="activeStep">
      <el-step title="填写信息" description="请填写必要信息以便完成审核"></el-step>
      <el-step title="审核中" description="我们的工作人员正在审核您的信息"></el-step>
      <el-step title="审核通过" :status="entity.auditType===2?'error':'success'"
               :description="entity.auditType===2?entity.auditOption:'以下是您的认证信息'"></el-step>
    </el-steps>
    <el-form label-position="right" label-width="100px" ref="form" :model="entity" :rules="rules">
      <h4>基础信息</h4>
      <el-form-item label="用户名">
        <el-input :value="userInfo.loginName" disabled></el-input>
      </el-form-item>
      <h4>认证信息</h4>
      <el-form-item label="姓名" prop="nickName">
        <el-input v-model="entity.nickName" :disabled="!canEdit"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNum">
        <el-input type="number" v-model="entity.phoneNum" :disabled="!canEdit"></el-input>
      </el-form-item>
      <el-form-item label="身份证正面" prop="idCardFront">
        <uploader :value.sync="entity.idCardFront" :disabled="!canEdit"></uploader>
      </el-form-item>
      <el-form-item label="身份证背面" prop="idCardBack">
        <uploader :value.sync="entity.idCardBack" :disabled="!canEdit"></uploader>
      </el-form-item>
      <el-form-item label="公司名称 " prop="companyName">
        <el-input v-model="entity.companyName" :disabled="!canEdit"></el-input>
      </el-form-item>
      <el-form-item label="营业执照" prop="cardFront">
        <uploader :value.sync="entity.businessLicense" :disabled="!canEdit"></uploader>
      </el-form-item>
      <h4>库存信息(可选)</h4>
      <!--<el-form-item label="种植类型" prop="plantType">-->
        <!--<el-select v-model="entity.plantType"-->
                   <!--filterable value-key="id" clearable>-->
          <!--<el-option v-for="(item,index) in []"-->
                     <!--:key="item.id"-->
                     <!--:label="item.name"-->
                     <!--:value="item.id">-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item label="所在区域" prop="areaId">
        <area-selector v-model="entity.areaId"></area-selector>
      </el-form-item>
      <el-form-item label="详细地址" prop="areaDetail">
        <el-input v-model="entity.areaDetail"></el-input>
      </el-form-item>
      <el-form-item label="种植面积" prop="plantAcreage">
        <el-input-number v-model="entity.plantAcreage"></el-input-number>
      </el-form-item>
      <el-form-item label="年产量" prop="annualYield">
        <el-input-number v-model="entity.annualYield"></el-input-number>
      </el-form-item>
      <el-form-item label="预算" prop="budget">
        <el-input-number v-model="entity.budget"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button v-if="activeStep===0||activeStep===2" type="primary" @click="handleSubmit">提交审核</el-button>
        <el-button v-if="activeStep===3" type="primary" @click="handleResubmit">再次提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import utils from '../../../utils/index';
import uploadAPI from '../../../api/upload';
import userAPI from '../../../api/business/user';
import Uploader from '../../components/Uploader';
import AreaSelector from '../../business/components/AreaSelector';

export default {
    components: {
        AreaSelector,
        Uploader
    },
    data() {
        return {
            imageUrl: '',
            entity: {
                auditType: 0,
                registerType: 2,
                nickName: '',
                phoneNum: '',
                idCardFront: '',
                idCardBack: '',
                companyName: '',
                businessLicense: '',
                annualYield: 0,
                areaId: '',
                budget: 0
            },
            example: {
                'annualYield': 0,
                'areaDetail': 'string',
                'areaId': 'string',
                'budget': 0,
                'businessLicense': 'string',
                'companyName': 'string',
                'idCardBack': 'string',
                'idCardFront': 'string',
                'nickName': 'string',
                'phoneNum': 'string',
                'plantAcreage': 0,
                'plantType': 0,
                'registerType': 0
            },
            rules: {
                nickName: [{ required: true, trigger: 'blur', message: '必填' }],
                phoneNum: [{ required: true, trigger: 'blur', message: '必填' }],
                registerType: [{ required: true, trigger: 'blur', message: '必填' }],
                idCardFront: [{ required: true, trigger: 'blur', message: '必填' }],
                idCardBack: [{ required: true, trigger: 'blur', message: '必填' }],

            },
            uploadAPI
        };
    },
    computed: {
        userInfo() {
            return this.$store.state.user.info;
        },
        uploadURL() {
            return uploadAPI.uploadURL;
        },
        activeStep() {
            return this.entity.auditType;
        },
        canEdit() {
            return this.activeStep === 0;
        }
    },
    created() {
        this.getIdentifyInfo();
    },
    mounted() {
        this.init();
    },
    methods: {
        ...utils,
        init() {
            this.entity.nickName = this.userInfo.nickName;
            this.entity.phoneNum = this.userInfo.phoneNumber;
        },
        getIdentifyInfo() {
            userAPI.getIdentifyInfo()
                .then(res => {
                    if (res.obj) {
                        // this is not the user submit to audit at first time,
                        // set the data
                        this.entity = Object.assign(this.entity, res.obj);
                    }
                });
        },
        handleSubmit() {
        // confirm required fields
            if (this.entity.registerType === 2 && !this.checkForSeller()) {
                return;
            }
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.$store.dispatch('loading', 1).then();
                    userAPI.submitIdentifyInfo(this.entity)
                        .then(res => {
                            this.entity = Object.assign(this.entity, res.obj);
                            this.$store.dispatch('loading', -1).then();
                        });
                }
            });
        },
        checkForSeller() {
            if (!this.entity.companyName) {
                this.$alert('必须提供公司名称');
                return false;
            }
            if (!this.entity.businessLicense) {
                this.$alert('必须提供营业执照');
                return false;
            }
            return true;
        },
        handleResubmit() {
            this.entity.auditType = 0;
        }
    }
};
</script>

<style lang="scss">
</style>
